<template>
  <div class="total">
    <div class="titleShadow t-title">数据统计</div>
    <div class="echarts">
      <el-radio-group
        v-model="radio1"
        class="piechart"
        size="small"
        @change="switchBar"
      >
        <div class="pie">
          <pie
            :subText="{ name: '已使用', value: '4741万元' }"
            color="#E6C660"
            :datas="70"
          />
          <el-radio label="0" size="large">资金使用</el-radio>
        </div>
        <div class="pie">
          <pie
            :subText="{ name: '本年建成', value: '6个' }"
            color="#3DE5FF"
            :datas="60"
          />
          <el-radio label="1" size="large">项目进度</el-radio>
        </div>
        <div class="pie">
          <pie
            :subText="{ name: '验收中', value: '2个' }"
            color="#3FE095"
            :datas="45"
          />
          <el-radio label="2" size="large">验收进度</el-radio>
        </div>
      </el-radio-group>
    </div>
    <div class="titleShadow linetit">
      {{
        radio1 == "0" ? "资金使用情况" : radio1 == "1" ? "项目进度" : "验收进度"
      }}
    </div>
    <div class="bar">
      <bar :datas="bardata" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, onMounted } from "vue";
const pie = defineAsyncComponent(() => import("./Pie.vue"));
const bar = defineAsyncComponent(() => import("./Bar.vue"));
const radio1 = ref("0");

let bardata = ref({});

const pieDataList = ref([
  {
    x: [2018, 2019, 2020, 2021, 2022, 2023],
    y1: {
      name: "已投入使用",
      data: [350.15, 456.6, 615.89, 1652.3, 2564, 4741],
    },
    y2: {
      name: "计划投入资金",
      data: [452.25, 520.6, 833.6, 1859.3, 3205.87, 6320.46],
    },
    stack: "1",
    index: 0,
  },
  {
    x: [2018, 2019, 2020, 2021, 2022, 2023],
    y1: {
      name: "建设完成",
      data: [4, 3, 3, 1, 2, 5],
    },
    y2: {
      name: "应建项目",
      data: [5, 5, 5, 3, 2, 6],
    },
    stack: "1",
    index: 1,
  },
  {
    x: [2018, 2019, 2020, 2021, 222, 2023],
    y1: {
      name: "验收中",
      data: [3, 2, 2, 1, 1, 2],
    },
    y2: {
      name: "已验收",
      data: [1, 1, 1, 1, 1, 1],
    },
    stack: "2",
    index: 2,
  },
]);
function switchBar(e: string) {
  bardata.value = pieDataList.value[Number(e)];
}
bardata.value = pieDataList.value[0];
onMounted(() => {});
</script>

<style scoped lang="scss">
.total {
  height: calc(100% - 20px - 269px);
  margin-top: 20px;

  .t-title {
    padding-left: 20px;
    font-size: 24px;
    line-height: 40px;
    background: url("@/assets/construct/module_title_bg.png") no-repeat;
  }

  .echarts {
    .piechart {
      display: flex;
      align-content: flex-start;
      height: 200px;
      text-align: center;

      ::v-deep(.el-radio__label) {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
      }

      .pie {
        flex: 1;
        height: calc(100% - 50px);
        padding: 0;
      }
    }

    ::v-deep(.el-radio__input) {
      .el-radio__inner {
        background: transparent;

        &::after {
          width: 8px;
          height: 8px;
          background-color: #2cd7ff;
        }
      }
    }
  }

  .linetit {
    padding-left: 50px;
    font-size: 24px;
    line-height: 40px;
    background: url("@/assets/construct/icon_title.png") no-repeat;
    background-size: 40px;
  }

  .bar {
    height: calc(100% - 200px - 40px - 40px);
  }
}
</style>
